<template>
  <div style="display:flex;margin: 0 auto;" >
      <div style="width:400px;height:350px">
        <img :src="productSkuImg" class="image">
      </div>
      <div style="" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size:30px;font-weight:1000">{{goodName}}</span>
          <!-- <el-button style="float: right" type="text" @click="gotoIndex">操作按钮</el-button> -->
        </div>
        <!-- <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div> -->
        <div class="text item">
          <span style="font-weight:800">商品销量：</span>{{goodSoldNum}}
        </div>
        <div class="text item">
          <span style="font-weight:800">商品内容：</span>{{productSkuName}}
        </div>
        <div class="text item">
          <span style="font-weight:800">促销价：</span>￥{{productSkuSellPrice}}
        </div>
        <div class="text item">
          <span style="font-weight:800">原价：</span>￥<span style="text-decoration:line-through">{{productSkuOriginalPrice}}</span> 
        </div>
        <div class="text item">
         <span style="font-weight:800"> 数量：</span>
          <template>
            <el-input-number v-model="num" size="mini" :min="1" :max="Number(productSkuStock)"></el-input-number>
          </template>
          库存{{productSkuStock}}件
        </div >
        <div style="display:flex;">
          <div class="text item" style="margin-right:3px">
            <el-button type="danger" plain size="mini" @click="GotoShoppingCart">去购物车</el-button>
          </div>
          <div class="text item" >
            <el-button type="danger" size="mini" :loading="loading" @click="AddShoppingCart">加入购物车</el-button>
          </div>
        </div>
      </el-card>
      </div>
  </div>
</template>

<script>
import http from '@/utils/request'
// import preventBack from 'vue-prevent-browser-back';
export default {
  // mixins: [preventBack],//注入
  // name: "/",
  props:['goodId','goodName','goodSoldNum','productSkuId','productSkuName',
          'productSkuImg','productSkuOriginalPrice','productSkuSellPrice',
          'productSkuStock','uId'],
  data() {
    return {
      num: 1,
      loading: false,
    }
  },
  methods: {
    AddShoppingCart() {
        // 如果有登录信息就添加到购物车
        if(null != this.$cookies.get('access_token')){
        http.post("/shopping/a",{
          productId: this.goodId,
          skuId: this.productSkuId,
          userId: this.uId,
          cartNum: this.num,
          productPrice: this.productSkuSellPrice,
          skuProps: this.productSkuName
        })
          .then(() => {
            this.loading = true
            this.$message({
                message: '添加成功',
                type: 'success',
                duration: 2000,
            });
            setTimeout(() => {
                this.loading = false
            }, 2000);
          })
      }else { // 没有登录就跳转到登录界面
        this.loading = true
        this.$message({
            message: '请先登录',
            duration: 2000,
        });
        setTimeout(() => {
            this.loading = false
            window.location.href = "/login"
        }, 2000);
      }
    },
    GotoShoppingCart() {
      window.location.href="/my-cart"
    },
    // gotoIndex() {
    //   window.location.href="/"
    // }
  }
}
</script>

<style>
  .image {
    width: 100%;
    height: 100%;
    display: block;
    /* margin: 0 auto; */
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 20px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin-left: 5px;
    width: 450px;
    height: 350px;
    /* height: 100%; */
  }
</style>